<template>
    <div class="task i_maxW">
        <router-link class="addTask"  :to="{path: '/prepare/task-add', query: {id: $route.query.id, name: $route.query.name}}">新建任务</router-link>
        <div class="prepare-crumbs">
            <router-link to="/prepare">备课<i>></i></router-link>
            <span @click="goBack">{{$route.query.name}} </span>
            <span><i>></i>任务</span>
        </div>
        <div class="conten-box">
            <ul class="clear" v-loading="loading"  element-loading-text="拼命加载中">
                <li class="fl task-list" v-for="item of taskList" :key="item.id">
                    <div class="clear task-list-cc">
                        <span class="task-list-name" :title="item.prepare_task_name">{{item.prepare_task_name}}</span>
                        <el-popover
                            placement="bottom"
                            width="100"
                            popper-class="prepare"
                            trigger="hover">
                            <ul class="prepare-op">
                                <li @click="removeDate(item.prepare_task_id)">删除</li>
                            </ul>
                            <i slot="reference" class="el-icon-arrow-down"></i>
                        </el-popover>
                        <!-- <i class="el-icon-delete fr" @click="removeDate(item.prepare_task_id)"></i> -->
                    </div>
                   <div class="task-list-op">
                       
                    <el-tooltip :content="item.profile" placement="top-start" effect="light">
                         <span>查看要求</span>
                       </el-tooltip>
                       <span  @click="showViews(item)">任务统计</span>
                   </div>
                    <div class="task-list-info clear">
                        <div class="task-list-info-l fl">
	                            <div class="task-list-info-l-img box">
	                                <img :src="BASE_URL + item.avatar_path" >
								</div>
                                <div class="task-list-info-l-txt box">
                                    <span>{{item.createname}}</span>
                                    <span>{{getDateDiff(item.create_time)}}</span>
                                </div>
                            </div>
                            <div class="task-list-info-r fr">
                              <!--   <el-popover placement="bottom-start" width="50" trigger="hover" popper-class="task-popover" content="发任务">
                                    <button class="p-task new" slot="reference"></button>
                                </el-popover>
                                <el-popover placement="bottom-start" width="50" trigger="hover" popper-class="task-popover" content="下载">
                                    <button class="p-task de" slot="reference"></button>
                                </el-popover>
                                <el-popover placement="bottom-start" width="50" trigger="hover" popper-class="task-popover" content="删除">
                                    <button class="p-task del" slot="reference" @click="removeDate(item.prepare_task_id)"></button>
                                </el-popover> -->
                                 <span class="fr">截止时间: {{item.end_time}}</span>
                            </div>
                        </div>
                </li>
            </ul>
            <template v-if="total_sum > page_size">
                <el-pagination @current-change="sizeChange" :current-page.sync="page_index" :page-size="page_size" layout="total, prev, pager, next" :total="total_sum">
                </el-pagination>
            </template>
            <!--  -->
            <div class="dependent" v-if="placeholder">
                <i class="ipng image_state01"></i>
                <p>还没发现任何相关的内容哦~</p>
            </div>
        </div>

        <!--  -->
        <el-dialog title="任务统计" :visible.sync="statisticsVisible" width="800px" custom-class="alBox" :close-on-click-modal="false">
			<div class="statistics-title" v-if="taskInfo">{{taskInfo.prepare_task_name}}</div>
			<template>
				<el-tabs v-model="activeName"  @tab-click="handleClick">
                    <template v-for="(tab, index) of statisticList.class_list">
    					<el-tab-pane :label="tab.name" :name="(index+1).toString ()" :key="tab.id">
                            
        						<div class="statistics-per" v-if="tab.sum == 0">
        							<span>已完成({{tab.now}}人，0%）</span>
        							<span>未完成({{tab.unnow}}人，0%)</span>
        						</div>
                                <div class="statistics-per" v-else>
                                    <span>已完成({{tab.now}}人，{{ (parseInt(tab.now) / parseInt(tab.sum)*100) }}%）</span>
                                    <span>未完成({{tab.unnow}}人，{{ (parseInt(tab.unnow) / parseInt(tab.sum)*100) }}%)</span>
                                </div>
                            <template>
        						<div class="statistics-num" >
        							<p>当前已完成学生</p>
        							<ul class="clear">
        								<li class="fl"  v-for="(y, index) of statisticList.success">{{y.username}}</li>
        							</ul>
        						</div>	
                            </template>
                            <template >
        						<div class="statistics-num">
        							<p>当前未完成学生</p>
        							<ul  class="clear">
        								<li class="fl" v-for="(n, index) of statisticList.un_success">{{n.username}}</li>
        							</ul>
        						</div>
                            </template>
        				</el-tab-pane>
                    </template>
				</el-tabs>
			</template>
        </el-dialog>
    </div>
</template>
<script>

    export default {
        data() {
            return {
                taskData: [{
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }],
                page_index: 1,
                page_size: this.$g.page_size,
                total_sum: 0,
                placeholder: false,
                taskVisible: false,
                statisticsVisible: false,
                activeName: '1',

                newruleForm: {
                    name: '',
                    class_id: [],
                    date1: '',
                    date2: '',
                    timer: 100,
                    desc: ''
                },
                rules: {
                    name: [
                        { required: true, message: '请输入任务名称', trigger: 'blur' },
                    ],
                    class_id: [
                        { type: 'array', required: true, message: '请至少选择一个任务对象', trigger: 'change' }
                    ],
                    date1: [
                        { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
                    ],
                    date2: [
                        { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
                    ],
                    timer: [
                        { required: true, message: '请输入任务时长', trigger: 'blur' },
                    ],
                    desc: [
                        { required: true, message: '请填写活动形式', trigger: 'blur' }
                    ]
                },
                loading: true,
                taskList: [],
                taskName: '',
                statisticList: [],
                taskInfo: null,
                class_id: 0,
            }
        },
        watch: {
            class_id(newval,val){
                if (newval) {
                    this.get_statisticList( )
                }
            }
        },
        created(){
            this.get_taskList()
        },
        methods: {
            handleClick(tab, event) {
                
                for (var i = 0; i < this.statisticList.class_list.length; i++) {
                   if ( this.statisticList.class_list[i].name == tab.label) {
                        this.class_id = this.statisticList.class_list[i].id
                   }
                }
            },
            showViews(item){
                this.statisticsVisible = true;
                this.taskInfo = item
                this.get_statisticList( )
            },
            get_statisticList(){
               
               
                // console.info(this.taskInfo)
                let success = (res=>{
                    this.statisticList = res.data;
                    this.statisticsVisible = true;
                    this.taskName = name
                });

                this.$ajax({
                    url: 'api/task/get_task_count',
                    method: 'get',
                    params: {
                       task_id: this.taskInfo.prepare_task_id,
                       class_id: this.class_id
                    },
                    func: {success: success}
                })
            },
            removeDate(id){
                this.$confirm('确认执行此操作?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    customClass: 'removeing'
                }).then(() => {
                    let success = (res => {     
                        this.$message.success(res.msg)
                         this.get_taskList()
                    })
                    this.$ajax({
                        url: 'api/prepare/prepare_task',
                        method: 'delete',
                        params: {
                            prepareid: this.$route.query.id,
                            taskid: id
                        },
                        func:{
                            success:success
                        }
                    })
                }).catch(() => {});
            },
            get_taskList(){
                let success = (res=>{
                    this.taskList = res.data.data;
                    this.total_sum = parseInt(res.data.data_sum);

                    this.loading = false;

                    this.taskList.length === 0
                    ? this.placeholder = true
                    : this.placeholder = false
                });

                this.$ajax({
                    url: 'api/prepare/prepare_task_list',
                    method: 'get',
                    params: {
                       prepareid: this.$route.query.id,
                       userid: this.$g.user_id,
                       page_index: this.page_index,
                       page_size: this.page_size 
                    },
                    func: {success: success}
                })
            },
        	submitForm(formName) {
        		this.$refs[formName].validate((valid) => {
        			if (valid) {
        				alert('submit!');
        			} else {
        				console.log('error submit!!');
        				return false;
        			}
        		});
        	},
        	resetForm(formName) {
        		this.taskVisible = false
        		// this.$refs[formName].resetFields();
        	},
            goBack() {
                this.$router.back(-1)
            },
            sizeChange(val) {
                this.page_index = val;
                this.get_taskList()
                // console.log(`当前页: ${val}`);
            },
            getDateTimeStamp (dateStr) {
                return Date.parse(dateStr.replace(/-/gi,"/"));
            },
            getDateDiff (dateStr) {
                var publishTime = this.getDateTimeStamp(dateStr)/1000,
                    d_seconds,
                    d_minutes,
                    d_hours,
                    d_days,
                    timeNow = parseInt(new Date().getTime()/1000),
                    d,

                    date = new Date(publishTime*1000),
                    Y = date.getFullYear(),
                    M = date.getMonth() + 1,
                    D = date.getDate(),
                    H = date.getHours(),
                    m = date.getMinutes(),
                    s = date.getSeconds();
                    //小于10的在前面补0
                    if (M < 10) {
                        M = '0' + M;
                    }
                    if (D < 10) {
                        D = '0' + D;
                    }
                    if (H < 10) {
                        H = '0' + H;
                    }
                    if (m < 10) {
                        m = '0' + m;
                    }
                    if (s < 10) {
                        s = '0' + s;
                    }

                d = timeNow - publishTime;
                d_days = parseInt(d/86400);
                d_hours = parseInt(d/3600);
                d_minutes = parseInt(d/60);
                d_seconds = parseInt(d);

                if(d_days > 0 && d_days < 3){
                    return d_days + '天前';
                }else if(d_days <= 0 && d_hours > 0){
                    return d_hours + '小时前';
                }else if(d_hours <= 0 && d_minutes > 0){
                    return d_minutes + '分钟前';
                }else if (d_seconds < 60) {
                    if (d_seconds <= 0) {
                        return '刚刚发表';
                    }else {
                        return d_seconds + '秒前';
                    }
                }else if (d_days >= 3 && d_days < 30){
                    return M + '-' + D + ' ' + H + ':' + m;
                }else if (d_days >= 30) {
                    // return Y + '-' + M + '-' + D + ' ' + H + ':' + m;
                    return M + '-' + D + ' ' + H + ':' + m;
                }
            },
        }
    }
</script>